<template>
<div class="wrapper">
<!--  班级 作业题目 作业主题 作业内容 附件 评分-->
  <ul class="hw_info">
    <!-- <li class="hw_info_item">
      <el-tag disable-transitions>学生班级</el-tag>
      <span>{{homeworkdetail.class}}</span>
    </li> -->
    <li class="hw_info_item">
      <el-tag disable-transitions>学生姓名</el-tag>
      <span>{{homeworkdetail.stuName}}</span>
    </li>
    <li class="hw_info_item">
      <el-tag disable-transitions>作业题目</el-tag>
      <span>{{homeworkdetail.hwTitle}}</span>
    </li>
    <!-- <li class="hw_info_item">
      <el-tag disable-transitions>作业主题</el-tag>
      <span>{{homeworkdetail.hwTheme}}</span>
    </li> -->
    <li class="hw_info_item">
      <el-tag disable-transitions>提交时间</el-tag>
      <span>{{homeworkdetail.submitTime}}</span>
    </li>
    <li class="hw_info_item">
      <el-tag disable-transitions>作业内容</el-tag>
      <p class="hw_content">{{homeworkdetail.content}}</p>
    </li>
    <li v-if="true" class="hw_info_item">
      <el-tag disable-transitions >附件</el-tag>
      <el-button @click="downloadHw2(homeworkdetail.hwId)"><span>下载</span></el-button>
    </li>
    <li class="hw_info_item">
      <el-tag disable-transitions>评分</el-tag>
      <div class="score_slider">
        <el-slider
            v-model="homeworkdetail.score"
            show-input
            step="0.5"
        >
        </el-slider>
      </div>
    </li>
    <li class="hw_info_item">
      <el-tag disable-transitions>评语</el-tag>
      <el-input 
        v-model="homeworkdetail.hwComment"
        style="height: 100%;width: 700px;"
        type="textarea"
        :rows="5"
        />
    </li>
  </ul>
  <div class="footer">
    <el-button type="primary" @click="correctHw">提交</el-button>
    <el-button @click="handleClose">返回</el-button>
  </div>
</div>
</template>

<script>
export default {
  name: "TeacherHomeworkCorrectingDetail",
  data(){
    return{
      homeworkdetail:{
        hwId: '',
        class: '一班',
        stuName: '张三',
        hwTitle: '作业一',
        hwTheme: '主题',
        hwContent: '这是内容这是内容这是内容这这是内容这是内容\',',
        hwAppendix: '1.doc',
        score: '60',
        hwComment: '',
        remarks: '',
      },
      subjectdetail:''
    }
  },
  created() {
    const HwId = this.$route.params.Hwid;
    this.homeworkdetail.hwId = HwId;
    this.getHwDetail(HwId);
    console.log(this.homeworkdetail)
  },
  methods:{
    getHwDetail(HwId){
      var _this = this
      this.$axios({
        url: '/homework/data/detailed',
        method: 'post',
        params: {
          hwId: HwId
        } 
      }).then( response => {
            let stateCode = response.headers["state"]
            if(stateCode=="200"){
               this.homeworkdetail = response.data;
            }
            else if(stateCode==null){
                this.$message.success("请求数据异常！")
            }
            else{
                this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
            }

        })
        .catch(function (error){
            let stateCode = error.response.headers["state"]                            
            if(stateCode!=""){
                _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
            }
            else{
                _this.$message.error("后端异常")
            }
        })
        .then(function (){
            console.log("测试成功")
        }) 
    },
    getSubjectDetail(SubId){
      this.$axios({
        url: '/subject/detailedinfo',
        method: 'post',
        params: {
          subId: SubId
        }
      }).then((data) => {
        this.subjectdetail = data.data;
        console.log(this.subjectdetail)
      })
    },
    correctHw(){
      let formData = new FormData();
      formData.append('homeworkId', this.homeworkdetail.hwId);
      formData.append('score', this.homeworkdetail.score);
      formData.append('comment', this.homeworkdetail.hwComment);
      this.$axios
          .post('/homework/correct', formData)
          .then(()=>{
        this.$message.success("批改成功！！")
        this.$router.push('/teacher/hwcorrecting');
        // this.$notify({
        //   title: '完成',
        //   message: '批改成功!',
        //   type: 'success'
        // });
      })
    },
    downloadHw2(targetId){
      this.$axios({
        url : '/file/download2',
        method: 'post',
        params:{
          targetId : targetId
        },
        responseType: 'blob'
      }).then((result)=>{
        if(result.data.size==0) {
          this.$message.error("文件下载失败！！")
        }
        var blob = new Blob([result.data], {
              type:
                  'application/octet-stream;charset=utf-8',
            })

        
        let contentDisposition = result.headers["content-disposition"].split("\\")
        let filename = contentDisposition[contentDisposition.length-1];
        this.$message.success("文件" + filename + "下载成功！")
        
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
    },
    downloadHw(){
      const formdata = new FormData();
      formdata.append("fileName" , '1.png');
      this.$axios
          .post('/file/download',formdata,{
            'Content-type':'multipart/form-data'
      }).then((result) => {
        console.log(result);
      })
    },
    handleClose(){
      this.$router.back();
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper{
  padding: 20px;
}
.hw_info{
  list-style: none;
}
.hw_info > .hw_info_item{
  text-align: left;
  span{
    margin: 10px 10px;
  }
}
.hw_content{
  position: relative;
  top: -34px;
  margin: 0 30px 0 100px;
}
.score_slider{
  display: inline-block;
  width: 400px;
  margin-left: 15px;
}
.footer{
  margin:20px 0;
}
</style>

<style lang="less">

</style>